<template>
  <div class="content-box" v-loading="loading">
    <!-- 标题 -->
    <div class="head">
       <div class="addTaskTitle">
        CRM客户详情信息
       </div>
       <div class="back">
         <el-button type="primary" plain round size="small" icon="el-icon-back" @click="goback">返回</el-button>
       </div>
    </div>
    <!-- 面板信息 -->
    <div class="panel">
        <div class="basicPanel">
           <div class="basicTitle">基本信息</div>
           <div class="basicInfo">
              <div 
              :class="['basicItem',device === 'desktop'?'fourEqualParts':'']"
              v-for="(item,index) in basicClunms" :key="index">
                <div class="basicLable">{{ item.lable }}：</div>
                <div class="basicValue">
                  <!--跟进状态单独处理  -->
                  <template v-if="item.props === 'orderStatus'">
                    <el-tag :type="orderStatusColor(infoObj[item.props])">
                      {{ ArrayFormatObj(orderStatusOptions)[infoObj[item.props]]}}
                    </el-tag>
                  </template>
                  <!-- 客户星级单独处理 -->
                   <template v-else-if="item.props === 'userLevel'">
                      {{ ArrayFormatObj(userLevelOption)[infoObj[item.props]]}}
                   </template>
                  <span v-else>{{ infoObj[item.props] }}</span>
                </div>
              </div>
           </div>
        </div>
        <div class="implementPanel">
           <div class="implementTitle">备注集合</div>
           <div class="implementInfo">
            <el-table
             v-sticky-header
             ref="table"
             :data="infoObj.remarksList"
             >
              <template v-for="(item,index) in columns">
                <el-table-column
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                  :width="getColumnWidth(index)"
                  align="center"
                  :fixed="item.fixed"
                  :sortable="item.sortable ? item.sortable : false"
                  :show-overflow-tooltip="item.showTooltip"
                  v-if="item.visible"
                >
                </el-table-column>
              </template>
          
            </el-table>
           </div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getOrderById,
} from "@/api/sysCrm/crmCustomer";
export default {
  name: 'crmCustomerDetail',
  data() {
    return {
      basicClunms:[
        { props:'cusName',lable:'客户姓名'},
        { props:'followUser',lable:'跟进人'},
        { props:'createTime',lable:'分配时间'},
        { props:'orderStatus',lable:'跟进状态'},
        { props:'userLevel',lable:'客户星级'},
        { props:'phoneMd5',lable:'手机号MD5'},
        { props:'provinceName',lable:'省份'},
        { props:'cityName',lable:'城市'},
      ],
      // 详情信息加载状态
      loading:false,
      // CRM客户明细信息
      infoObj:{},
      // 备注集合表格列信息
      columns:[
        {label: `备注时间`,prop: "createTime",visible: true,pcWidth: 'auto',mobileWidth: 130,fixed: null,showTooltip: true,},
        {label: `备注人`,prop: "followUser",visible: true,pcWidth: 'auto',mobileWidth: 130,fixed: null,showTooltip: true,},
        {label: `备注信息`,prop: "remarks",visible: true,pcWidth: 230,mobileWidth: 100,fixed: null,showTooltip: true,},
      ],
      // 客户星级模式筛选项
      userLevelOption: [
        { label: "未打星级",value: -1, },
        { label: "0星",value: 0, },
        { label: "1星",value: 1, },
        { label: "2星",value: 2, },
        { label: "3星",value: 3, },
        { label: "4星",value: 4, },
        { label: "5星",value: 5, },
      ],
      // 跟进状态筛选列表
      orderStatusOptions:[
        { label: "待跟进", value: 0 },
        { label: "跟进中", value: 1 },
        { label: "挂起", value: 2 },
        { label: "结束", value: 3 },
        { label: "转移", value: 4 },
      ],
      // 主键id
      id:null
    };
  },
  created(){
    if(this.$route?.query?.id){
      this.getInfoById(this.$route.query?.id)
      this.$set(this,'id',this.$route?.query?.id)
    }
  },
  computed: {
    ...mapGetters(["device"]),
     // 跟进状态标签颜色处理
    orderStatusColor:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return 'warning';
             case 1:
                return 'success';
             case 2:
                return 'danger';
             case 3:
                return 'null';
             case 4:
                return 'info';
             default:
           }
        }
    },
     // 将数组转换为对象形式
    ArrayFormatObj:()=>{
       return (arr)=>{
         return arr.reduce((pre, cur)=>{
           pre[cur.value] = cur.label;
           return pre;
         },{})
       }
    },
    // 计算当前列元素在所处环境的宽度
    getColumnWidth() {
        return (index) => {
          return this.isMobile
            ? this.columns[index].mobileWidth
            : this?.sidebar?.opened
            ? this.columns[index].pcWidth - this.slightWidth
            : this.columns[index].pcWidth + 17;
        };
    },
  },
  methods: {
     // 根据主键id查询CRM客户明细
     getInfoById(id){ 
      this.loading = true;
      getOrderById(id).then(res=>{
          console.log(res);
          this.infoObj = res?.data
          this.loading = false          
       })
    },
    goback(){
      // 关闭当前页签
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一页面
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped lang='scss'>
.head{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  .addTaskTitle{
    font-weight: 700;
    font-size: 18px;
    margin-right: 20px;
  }
}
.panel{
  padding: 20px;
  background-color: #fff;
  border-radius: 6px;
  .basicPanel{
    width: 100%;
    .basicTitle{
      font-weight: 700;
      padding:0 0 20px;
    }
    .basicInfo{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .basicItem{
        flex: 1;
        display: flex;
        font-size: 14px;
        color: #606266;
        padding: 5px 0;
        .basicLable{
          width: 130px;
        }
        .basicValue{
          width: 170px;
        }
      }
      // 四等分样式
      .fourEqualParts{
        flex: 1 1 25%; // 每个子盒子占 25% 的宽度，最多 4 个子盒子一行
        max-width: 25%; // 最大宽度为 25%，确保即使在一行中不足四个子元素时，每个子元素的宽度也不会超过 25%。
      }
    }
  }
  .implementPanel{
      width: 100%;
     .implementTitle{
       font-weight: 700;
       padding: 20px 0;
     }
  }
}
</style>